<template>
	<view class="edit_personal_info_email">
		<Header leftPathType="navigateTo" leftPath="/pages/edit_personal_info/edit_personal_info" :title="$t('mine.edit.email.title')"/>
		<view class="edit_personal_info_email_content">
			<view class="_content_item">
				<view class="_content_item_title">{{$t('common.email')}}</view>
				<up-input
				    :placeholder="$t('common.email.placeholder')"
				    border="surround"
				    v-model="form.email"
					:customStyle="inputCss"
				  ></up-input>
			</view>
			<view class="_content_item">
				<view class="_content_item_title">{{$t('common.verification.code')}}</view>
				<InputCodeComm @getCode="getEmailCode" :codeNumberRef="form.email" :type="SMS_TYPE.ADD_CARD_OWNER"/>
				<view class="email-msg-warp">{{$t('common.email.msg')}}</view>
			</view>
			<view class="but_comm_warp" @click="updateOk">
				<text style="margin-left: 10rpx;">{{$t('mine.edit.yes')}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header_comm2.vue';
	import InputEmailComm from '@/components/input-email-comm.vue';
	import InputCodeComm from '@/components/input-code-comm.vue';
	import { SMS_TYPE } from '@/utils/enumUtils.js';
	
	export default {
		components:{Header,InputCodeComm},
		computed: {
		   SMS_TYPE() {
		     return SMS_TYPE;
		   }
		 },
		data() {
			return {
				inputCss:{
					"height":'80rpx',
					"background": "#F3F3F3FF",
					"border-radius": "20rpx",
					"border": "0rpx",
					"padding-left": "16px",
				},
				form:{
					email:null,
					code:null,
				},
			};
		},
		methods: {
			// 获取邮箱验证码
			getEmailCode(code){
				if(code){
					this.form.code = code;
				}
			},
			// 确认修改
			updateOk(){
				const params = this.form;
				
				uni.redirectTo({
					url: '/pages/edit_personal_info/edit_personal_info'
				})
			}
		}
	}
</script>

<style lang="scss">
.edit_personal_info_email{
	height: calc(100vh - 0rpx);
	.edit_personal_info_email_content{
		padding: 30rpx;
	}
	._content_item{
		margin-bottom: 40rpx;
		._content_item_title{
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 20rpx;
		}
	}
	.but_comm_warp{
		margin-top: 60rpx;
	}
}
</style>
